<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      
    </style>
    <script>
        window.onload = function(){
            var oBox = document.getElementsByClassName('box')[0];
            var oCatch = document.getElementsByClassName('catch');
            for(var i = 0 ; i < oCatch.length;i++){
                oCatch[i].index = i//单纯给li加个index值 方便阅读
            }
            oBox.onclick = function(e){
                e = e||window.event//一定要穿参数e 不用我说你也知道这个e是啥吧。。。。就是你点击的元素
                var target = e.target || e.srcElement
                console.log(target)
                if(target.tagName=='LI'){
                    //tagName 属性返回元素的标签名  div返回DIV li返回LI 都他妈是大写的很坑爹,这只是举个例子 不用非要用tagName 你也可以用className例如下面一个例子
                    console.log(target.index)
                }
                // if(target.className=='catch'){
                //     //className例子   我的意思是 不单单这两个，只要能选取到你想要的标签的任意属性都可以
                //     console.log(target.index)
                // }
            }

           
            
            
        }
    </script>
</head>
<body>
    <ul class="box">
        <li class='catch'>111</li>
        <li class="catch">222</li>
        <li class='catch'>333</li>
        <li class='catch'>444</li>
    </ul>
    
</body>
</html>